<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>修德抄经堂</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.min.css">
	<script src="../bower_components/mui/dist/js/mui.min.js"></script>
	<script src="../bower_components/jquery/dist/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/full.css">
	<link rel="stylesheet" type="text/css" href="../css/benxin_address.css">
	<script src="../js/resLoader.js"></script> 
</head>
<body>
	<div class="page">
		<div id="content" style="background: #1a2639;">
			<!--<div id="address" class="same color">
				地址管理
			</div>-->
			<h1 class="titles same" style="font-size: 26px; color: #c9b231; font-weight: 100;border-bottom: 1px solid #c9b231;padding-left: 13px; padding-top: 15px;">地址</h1>
			<ul id="address_list">
				<!--<li>-->
					<!--<p class="p_name fang">-->
						<!--<span id="name" class="same">张三</span>-->
						<!--<span id="dianhua" style="float: right;">18296191996</span>-->
					<!--</p>-->
					<!--<p class="address fang">北京市海淀区中关村创业大街车库咖啡2楼北京市海淀区中关村创业大街车库咖啡2楼</p>-->
					<!--<div class="btn">-->
						<!--<div class="left">-->
							<!--<img src="../img/nook.png">-->
							<!--<span class="fang">设为默认</span>-->
						<!--</div>-->
						<!--<div class="right">-->
							<!--<img src="../img/delet.png">-->
							<!--<span class="fang">删除</span>-->
						<!--</div>-->
					<!--</div>-->
				<!--</li>-->
				<!--<li>-->
					<!--<p class="p_name fang">-->
						<!--<span id="name" class="same">张三</span>-->
						<!--<span id="dianhua" style="float: right;">18296191996</span>-->
					<!--</p>-->
					<!--<p class="address fang">北京市海淀区中关村创业大街车库咖啡2楼北京市海淀区中关村创业大街车库咖啡2楼</p>-->
					<!--<div class="btn">-->
						<!--<div class="left">-->
							<!--<img src="../img/nook.png">-->
							<!--<span class="fang">设为默认</span>-->
						<!--</div>-->
						<!--<div class="right">-->
							<!--<img src="../img/delet.png">-->
							<!--<span class="fang">删除</span>-->
						<!--</div>-->
					<!--</div>-->
				<!--</li>-->
			</ul>

			<a href="add_address.html"><div id="add_address" class="same color">添加新地址<img src="../img/benxin/add_huang.png" ></div></a>
		</div>
		<button type="submit" id="queren" class="same">确认</button>

	</div>
</body>
<script>
	$(function () {
        function getCookie(name) {
            var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
            if (arr != null) return unescape(arr[2]);
            return null;
        }

        $.ajax({
            url: '/fe/user/address_list',
            success: function (data) {
                console.log(data);
                var data = data.data;
                var html = '';
                for(var i = 0,len=data.length;i<len;i++) {
                    html += `<li>
					<p class="p_name fang">
						<span id="name" class="same">${data[i].contact}</span>
						<span id="dianhua" style="float: right;">${data[i].phone}</span>
					</p>
					<p class="address fang">${data[i].address}</p>
					<div class="btn">
						<div class="left">
							<img src="../img/nook.png">
							<span class="fang" data-id="${data[i].id}">设为默认</span>
						</div>
						<div class="right" id="delete">
							<img src="../img/delet.png">
							<span class="fang" data-id="${data[i].id}">删除</span>
						</div>
					</div>
				</li>`
				}
				$('#address_list').append(html);
                $("#address_list li:first .btn .left span").addClass("color");
                $("#address_list li:first .btn .left img").attr("src","../img/ok.png");
                $('.btn .left').click(function(){
                    $('.btn .left span').removeClass("color");
                    $(this).find('span').addClass("color");
                    $(".btn .left img").attr("src","../img/nook.png")
                    $(this).find("img").attr("src","../img/ok.png")
                });

                $("#address_list li:last").css("border-bottom","none");
                //点击删除
                $('.right').click(function () {
                    var addressId = $(this).find('span').data('id');
                    var csrftoken = getCookie('csrftoken');
                    var index = $(this);

                    $.ajax({
                        url: '/fe/user/address_list/'+addressId+'',
                        type: 'DELETE',
                        beforeSend: function(xhr, settings) {
                            xhr.setRequestHeader("X-CSRFToken", csrftoken);
                        },
                        success: function (data) {
                            if(data.status == 200) {
                                console.log($(this));
                                index.parent().parent().remove();
                            }
                        }

                    })
                })
                //点击确认
                $('#queren').click(function () {
					var addressId = $('.btn .left span.color').data('id');
					if(addressId){
                        var csrftoken = getCookie('csrftoken');
                        $.ajax({
                            url: '/fe/user/address_list/'+addressId+'/default',
                            type: 'PUT',
                            beforeSend: function(xhr, settings) {
                                xhr.setRequestHeader("X-CSRFToken", csrftoken);
                            },
                            success:function (data) {
                                if(data.status == 200){
                                    location.href = 'benxin.html';
                                }else {
                                    return;
                                }
                            }

                        })
                    }else {
					    alert('请添加地址')
                    }

                })
            }
        });
    })

</script>
</html>